<template>
  <div class="drawer-container">
    <div class="drawer-item">
      <span>主题色</span>
      <theme-picker />
    </div>

    <div class="drawer-item">
      <span>Open Tags-View</span>
      <el-switch v-model="tagsView" class="drawer-switch" />
    </div>

    <div class="drawer-item">
      <span>Sidebar Logo</span>
      <el-switch v-model="showSidebarLogo" class="drawer-switch" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from "@/stores/setting"
const settingsStore = useSettingsStore()
const tagsView = computed({
  get: () => settingsStore.settings.tagsView,
  set: (value) => {
    settingsStore.changeSetting({ key: "tagsView", value })
  }
})

const showSidebarLogo = computed({
  get: () => settingsStore.settings.sidebarLogo,
  set: (value) => {
    settingsStore.changeSetting({ key: "sidebarLogo", value })
  }
})
</script>
